<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

<template>
  <div class="login h100">
    <div class="p-50 mt20">

      <mu-text-field
        v-model="from.phone"
        label="账号"
        full-width
      ></mu-text-field>

      <mu-text-field
        v-model="from.password"
        label="密码"
        full-width
        class="mt20"
      ></mu-text-field>

      <van-button
        class="mt20 b1 round"
        type="danger"
        size="large"
        block
        :disabled="from.loginState"
        @click="login"
      >登录</van-button>

    </div>

  </div>
</template>

<script>
export default {
    data() {
        return {
            from: {
                phone: "",
                password: "",
                loginState: true
            }
        };
    },
    watch: {
        from: {
            handler(newName, oldName) {
                if(newName.phone && newName.password){
                  this.from.loginState = false
                }else{
                  this.from.loginState = true
                }
            },
            deep: true
        }
    },
    methods: {
      login(){
        const toast1 = this.$toast.loading({
          duration: 0,
          forbidClick: true,
          loadingType: 'spinner',
          message: '登录中'
        });
        setTimeout(() => {
          toast1.clear()
          this.$router.push({
            path:"/"
          })
        }, 3000);
        

      }
    }
};
</script>


